<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8"></meta>
  <title th:text="'文章' + ${article != null?'修改':'新增'}"></title>
  <meta name="description" content="Vali is a responsive and free admin theme built with Bootstrap 4, SASS and PUG.js. It's fully customizable and modular."></meta>
  <meta name="viewport" content="width=device-width, initial-scale=1"></meta>

  <link rel="stylesheet" type="text/css" href="/css/main.css"></link>
  <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.css"></link>
  <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/font-awesome/4.3.0/css/font-awesome.min.css"></link>
</head>
<body class="app sidebar-mini rtl">
<!-- Navbar-->
<div th:replace="common/html/back::header"></div>
<!-- Sidebar menu-->
<div th:replace="common/html/back::sidebar"></div>
    <main class="app-content">
      <div class="app-title">
        <div>
          <h1><i class="fa fa-plus-circle"></i> 新增文章</h1>
          <p>new article</p>
        </div>
        <ul class="app-breadcrumb breadcrumb">
          <li class="breadcrumb-item"><i class="fa fa-home fa-lg"></i></li>
          <li class="breadcrumb-item">文章管理</li>
          <li class="breadcrumb-item">新增文章</li>
        </ul>
      </div>
      <div class="row">
        <div class="col-md-12">
          <div class="tile">
            <div class="tile-body">
              <form id="articleForm" class="form-horizontal" th:action="${article == null}?'/back/article/add':'/back/article/update'" method="post">
                <input type="hidden" th:if="${article != null}" name="id" th:value="${article != null}?${article.id}"></input>
                <div class="form-group row">
                  <label class="control-label col-md-1">标题</label>
                  <div class="col-md-8">
                    <input name="title" class="form-control" type="text" placeholder="文章标题" th:value="${article != null}?${article.title}"></input>
                  </div>
                </div>
                <div class="form-group row">
                  <label class="control-label col-md-1">贴图</label>
                  <div class="col-md-8">
                    <input id="photo" name="photo" class="form-control" type="text" placeholder="文章贴图" th:value="${article != null}?${article.photo}" onchange="previewImage(this)"></input>
                    <div id="photoPreview">
                    </div>
                  </div>
                </div>
                <div class="form-group row">
                  <label class="control-label col-md-1">简述</label>
                  <div class="col-md-8">
                      <input name="description" class="form-control" type="text" placeholder="文章描述" th:value="${article != null}?${article.description}"></input>
                  </div>
                </div>
                <div class="form-group row">
                  <label class="control-label col-md-1">个人分类</label>
                  <div class="col-md-8">
                    <select class="form-control" name="categoryId">
                      <option th:each="category:${listCategory}" th:value="${category.id}" th:text="${category.categoryName}" th:selected="${article != null &amp;&amp; category.id == article.categoryId}"></option>
                    </select>
                  </div>
                </div>
                <div class="form-group row">
                  <label class="control-label col-md-1">是否推荐</label>
                  <div class="col-md-8">
                    <input type="radio" id="isRecommend1" name="isRecommend" value="0"/>否&nbsp;&nbsp;
                    <input type="radio" id="isRecommend2" name="isRecommend" value="1"/>是
                  </div>
                </div>
                <div class="form-group row">
                  <label class="control-label col-md-1">文章内容</label>
                  <div class="col-md-8">
                    <textarea id="content" name="content" rows="10" cols="80"></textarea>
                  </div>
                </div>
                <div class="form-group row">
                  <label class="control-label col-md-1">标签</label>
                  <div class="col-md-8">
                    <input id="tags" name="tags" type="text" class="form-control" th:value="${tags}" style="min-width: 500px;"></input>
                  </div>
                </div>
              </form>
            </div>
            <div class="tile-footer">
              <div class="row">
                <div class="col-md-8 col-md-offset-3">
                  <button class="btn btn-primary" type="button" onclick="javascript:$('#articleForm').submit();"><i class="fa fa-fw fa-lg fa-check-circle"></i>发布文章</button>&nbsp;&nbsp;&nbsp;<a class="btn btn-secondary" href="#" onclick="javascript:history.back();"><i class="fa fa-fw fa-lg fa-times-circle"></i>返回</a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="clearix"></div>
      </div>
    </main>
    <!-- import ckeditor4 -->
    <script src="https://cdn.bootcss.com/ckeditor/4.9.2/ckeditor.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/popper.js/1.14.3/popper.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
    <script src="/js/main.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.js"></script>
    <script th:inline="javascript">
        var ckEditor = CKEDITOR.replace("content",
                        {
                            filebrowserUploadUrl : '/back/image/fileUpload',
                            filebrowserImageUploadUrl : '/back/image/fileUpload',
                            extraPlugins: 'codesnippet',
	                        codeSnippet_theme: 'monokai_sublime',
	                        height: 1000
                        });

        ckEditor.setData([[${article != null}?${article.content}]]);

        var photos = [[${article != null?article.photo:''}]];
        if(photos!=''){
            $("div #photoPreview ").empty();
            var img = photos.split(';');
            for(var i=0; i<img.length; i++){
                $("div #photoPreview ").append('<img src="'+ img[i] +'" class="img-responsive" width="461px" height="" style="margin-top:5px">');
            }
        }

        //图片预览
        function previewImage(data){
            //alert(data.value);
            $("div #photoPreview ").empty();
            var img = data.value.split(';');
            for(var i=0; i<img.length; i++){
                $("div #photoPreview ").append('<img src="'+ img[i] +'" class="img-responsive" width="461px" height="" style="margin-top:5px">');
            }
        }

        //bootstrap tagsinput使用
        var exa = $("#tags");
        exa.tagsinput({});
    </script>
  </body>
</html>